<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item v-for="(item,index) in breadcrumb" :key="index">{{ item.meta.title }}</el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script lang="ts" setup>

import {RouteLocationMatched, useRoute} from "vue-router";
import {onMounted, ref, Ref, watch} from "vue";

const route = useRoute()

const breadcrumb: Ref<RouteLocationMatched[]> = ref([]);

const getBreadCrumb = () => {
  // 过滤路由信息
  let matched = route.matched.filter((item) => item.meta && item.meta.title && item.children.length !== 1);
  // 拿到第一条数据
  const first = matched[0];
  // 判断
  breadcrumb.value = matched;
}

watch(() => route.path, () => {
  getBreadCrumb()
})

onMounted(()=>{
  getBreadCrumb()
})
</script>

<style scoped lang="scss">

// 不被选中的字体
.el-breadcrumb :deep(.el-breadcrumb__inner) {
  color: #303133 !important;
}

// 选中后的字体
.el-breadcrumb__item:last-child :deep(.el-breadcrumb__inner) {
  color: #97A8BE !important;
}
</style>
